<template>
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
      :columns="yearlyList"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    >
      <template #title>
        <span class="clear-btn" @click="handleClear"> 清空选择 </span>
      </template>
    </van-picker>
  </van-popup>
</template>

<script setup lang="ts">
import { useVModels } from '@vueuse/core'
import {
  ref,
  defineProps,
  computed,
  defineEmits,
  onMounted,
  watch,
  watchEffect,
  Ref,
} from 'vue'
import { getCensusList, getList } from '../api'
import { useSemester, useYearly } from '../use/useSearchPopup'
import { useLoginer } from '/@/use/loginer'

interface PropsType {
  visible: boolean
  modelValue: string
}
const props = defineProps<PropsType>()

const emits = defineEmits(['update:visible', 'update:modelValue'])

const { visible: showPicker, modelValue: value } = useVModels(props, emits)

const semesterList = useSemester()

const yearlyList = useYearly(semesterList)

watch(semesterList, (val) => {
  const defaultValue = val.find(({ currentFlag }) => currentFlag === 'Y')

  if (defaultValue) {
    value.value = defaultValue.yearly
  }
})

function onConfirm(item: string) {
  showPicker.value = false
  value.value = item
}

function handleClear() {
  showPicker.value = false
  value.value = ''
}
</script>

<style lang="less" scoped>
.clear-btn {
  font-size: var(--van-picker-action-font-size);
}
</style>
